<template><div><h2 id="起步套件" tabindex="-1"><a class="header-anchor" href="#起步套件"><span>起步套件</span></a></h2>
<ul>
<li><a href="#introduction">介绍</a></li>
<li><a href="#laravel-breeze">Laravel Breeze</a>
<ul>
<li><a href="#laravel-breeze-installation">安装</a></li>
<li><a href="#breeze-and-blade">Breeze &amp; Blade</a></li>
<li><a href="#breeze-and-livewire">Breeze &amp; Livewire</a></li>
<li><a href="#breeze-and-inertia">Breeze &amp; React / Vue</a></li>
<li><a href="#breeze-and-next">Breeze &amp; Next.js / API</a></li>
</ul>
</li>
<li><a href="#laravel-jetstream">Laravel Jetstream</a></li>
</ul>
<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍"><span>介绍</span></a></h2>
<p>为了帮助你快速构建 Laravel 应用，我们很高兴提供认证和应用程序起始套件。这些套件会自动使用所需的路由、控制器和视图来注册和验证应用程序的用户。</p>
<p>虽然你可以使用这些起始套件，但它们并非必需品。你可以通过安装全新的 Laravel 来从头开始构建自己的应用程序。无论你选择哪种方式，我们相信你都能构建出很棒的应用程序！</p>
<h2 id="laravel-breeze" tabindex="-1"><a class="header-anchor" href="#laravel-breeze"><span>Laravel Breeze</span></a></h2>
<p><a href="https://github.com/laravel/breeze" target="_blank" rel="noopener noreferrer">Laravel Breeze</a> 是 Laravel 的 <a href="https://learnku.com/docs/laravel/10.x/authentication" target="_blank" rel="noopener noreferrer">认证功能</a> 的一种简单、最小实现，包括登录、注册、密码重置、电子邮件验证和密码确认。此外，Breeze 还包括一个简单的「个人资料」页面，用户可以在该页面上更新其姓名、电子邮件地址和密码。</p>
<p>Laravel Breeze 的默认视图层由简单的 <a href="https://learnku.com/docs/laravel/10.x/blade" target="_blank" rel="noopener noreferrer">Blade 模版</a> 和 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> 组成。除此之外，Breeze 还可以使用 Vue 或 React 和 <a href="https://inertiajs.com/" target="_blank" rel="noopener noreferrer">Inertia</a> 来构建应用。</p>
<p>Breeze 为开始全新的 Laravel 应用程序提供了很好的起点，并且对于打算使用 <a href="https://laravel-livewire.com/" target="_blank" rel="noopener noreferrer">Laravel Livewire</a> 将 Blade 模板提升新的水平的项目来说，也是一个不错的选择。</p>
<p><img src="https://laravel.com/img/docs/breeze-register.png" alt="breeze-register.png"></p>
<h4 id="laravel-训练营" tabindex="-1"><a class="header-anchor" href="#laravel-训练营"><span>Laravel 训练营</span></a></h4>
<p>如果你是 Laravel 的新手，欢迎加入 <a href="https://bootcamp.laravel.com/" target="_blank" rel="noopener noreferrer">Laravel 训练营</a>。 Laravel 训练营将带领你通过使用 Breeze 构建你的第一个 Laravel 应用程序。这是一个很好的方式，让你了解 Laravel 和 Breeze 提供的所有功能。</p>
<h3 id="安装" tabindex="-1"><a class="header-anchor" href="#安装"><span>安装</span></a></h3>
<p>首先，你应该 <a href="https://learnku.com/docs/laravel/10.x/installation" target="_blank" rel="noopener noreferrer">创建一个新的 Laravel 应用程序</a>，配置好数据库并运行 <a href="https://learnku.com/docs/laravel/10.x/migrations" target="_blank" rel="noopener noreferrer">数据库迁移</a>。在创建了一个新的 Laravel 应用程序之后，你可以使用 Composer 来安装 Laravel Breeze：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">composer</span> require laravel/breeze <span class="token parameter variable">--dev</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>安装完 Breeze 后，你可以使用下文中提到的 Breeze「栈」来快速构建你的应用程序。</p>
<h3 id="breeze-blade" tabindex="-1"><a class="header-anchor" href="#breeze-blade"><span>Breeze &amp; Blade</span></a></h3>
<p>在使用 Composer 安装好 Laravel Breeze 之后，你可以运行 <code v-pre>breeze:install</code> Artisan 命令。这个命令会将身份验证视图、路由、控制器和其他资源复制到你的应用程序中。Laravel Breeze 将其所有代码都复制到你的应用程序中，这样你就可以完全控制和查看其功能和实现。</p>
<p>默认的 Breeze「栈」是 Blade 栈，它使用简单的 <a href="https://learnku.com/docs/laravel/10.x/blade" target="_blank" rel="noopener noreferrer">Blade 模板</a> 来渲染你的应用程序前端。你可以通过调用 <code v-pre>breeze:install</code> 命令来安装 Blade 栈，而无需其他额外的参数。在 Breeze 的脚手架安装完后，你还需要编译应用程序的前端资源：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan breeze:install</span>
<span class="line"></span>
<span class="line">php artisan migrate</span>
<span class="line"><span class="token function">npm</span> <span class="token function">install</span></span>
<span class="line"><span class="token function">npm</span> run dev</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接下来，你可以在 Web 浏览器中打开应用程序的 <code v-pre>/login</code> 或 <code v-pre>/register</code> 的 URL。所有 Breeze 的路由都定义在 <code v-pre>routes/auth.php</code> 文件中。</p>
<h4 id="黑暗模式" tabindex="-1"><a class="header-anchor" href="#黑暗模式"><span>黑暗模式</span></a></h4>
<p>如果你希望 Breeze 在构建应用程序前端时支持「黑暗模式」，只需要在执行 <code v-pre>breeze:install</code> 命令时提供 <code v-pre>--dark</code> 指令即可：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan breeze:install <span class="token parameter variable">--dark</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
要了解有关编译应用程序的 CSS 和 JavaScript 的更多信息，请查看 Laravel 的 <a href="https://learnku.com/docs/laravel/10.x/vite#running-vite" target="_blank" rel="noopener noreferrer">Vite 编译 Assets</a>.</p>
</blockquote>
<h3 id="breeze-livewire" tabindex="-1"><a class="header-anchor" href="#breeze-livewire"><span>Breeze &amp; Livewire</span></a></h3>
<p>Laravel Breeze 还提供了 <a href="https://livewire.laravel.com/" target="_blank" rel="noopener noreferrer">Livewire</a> 脚手架。Livewire 是一种仅使用 PHP 构建动态、反应式前端 UI 的强大方法。</p>
<p>Livewire 非常适合主要使用 Blade 模板，并且正在寻找 JavaScript 驱动的 SPA 框架（如 Vue 和 React）的更简单的替代方案的团队。</p>
<p>要使用 Livewire 栈，您可以在执行 <code v-pre>breeze:install</code> Artisan 命令时选择 Livewire 前端栈。在安装 Breeze 的脚手架后，您应当运行数据库迁移：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan breeze:install</span>
<span class="line"></span>
<span class="line">php artisan migrate</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="breeze-react-vue" tabindex="-1"><a class="header-anchor" href="#breeze-react-vue"><span>Breeze &amp; React / Vue</span></a></h3>
<p>Laravel Breeze 还通过 <a href="https://inertiajs.com/" target="_blank" rel="noopener noreferrer">Inertia</a> 前端实现提供 React 和 Vue 脚手架。 Inertia 允许你使用经典的服务器端路由和控制器构建目前流行的单页 React 和 Vue 应用程序。</p>
<p>Inertia 让你享受 React 和 Vue 的前端强大功能以及 Laravel 令人难以置信的后端生产力和快如闪电的 <a href="https://vitejs.dev/" target="_blank" rel="noopener noreferrer">Vite</a> 编译。 如果要指定技术栈，请在执行 <code v-pre>breeze:install</code> Artisan 命令时指定 <code v-pre>vue</code> 或 <code v-pre>react</code> 作为你想要的技术栈。 安装 Breeze 的脚手架后，你就可以安装依赖及运行前端项目：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan breeze:install vue</span>
<span class="line"></span>
<span class="line"><span class="token comment"># 或者。。。</span></span>
<span class="line"></span>
<span class="line">php artisan breeze:install react</span>
<span class="line"></span>
<span class="line">php artisan migrate</span>
<span class="line"><span class="token function">npm</span> <span class="token function">install</span></span>
<span class="line"><span class="token function">npm</span> run dev</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接下来，你就可以在浏览器中访问 <code v-pre>/login</code> 或 <code v-pre>/register</code> URL。 Breeze 的所有路由都在 <code v-pre>routes/auth.php</code> 文件中定义。</p>
<h4 id="服务器端渲染" tabindex="-1"><a class="header-anchor" href="#服务器端渲染"><span>服务器端渲染</span></a></h4>
<p>如果你希望 Breeze 支持 <a href="https://inertiajs.com/server-side-rendering" target="_blank" rel="noopener noreferrer">Inertia SSR</a>，你可以在调用 <code v-pre>breeze:install</code> 命令时提供 <code v-pre>ssr</code> 选项：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan breeze:install vue <span class="token parameter variable">--ssr</span></span>
<span class="line">php artisan breeze:install react <span class="token parameter variable">--ssr</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="breeze-next-js-api" tabindex="-1"><a class="header-anchor" href="#breeze-next-js-api"><span>Breeze &amp; Next.js / API</span></a></h3>
<p>Laravel Breeze 还可以生成身份验证 API，可以准备验证现代 JavaScript 应用程序，例如由 <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next</a>，<a href="https://nuxtjs.org/" target="_blank" rel="noopener noreferrer">Nuxt</a> 等驱动的应用。要开始，请在执行 <code v-pre>breeze:install</code> Artisan 命令时指定 <code v-pre>api</code> 堆栈作为所需的堆栈：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan breeze:install api</span>
<span class="line"></span>
<span class="line">php artisan migrate</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在安装期间，Breeze 将在应用程序的 <code v-pre>.env</code> 文件中添加 <code v-pre>FRONTEND_URL</code> 环境变量。该 URL 应该是你的 JavaScript 应用程序的 URL。在本地开发期间，这通常是 <code v-pre>http://localhost:3000</code>。另外，你应该确保 <code v-pre>APP_URL</code> 设置为 <code v-pre>http://localhost:8000</code>，这是 <code v-pre>serve</code> Artisan 命令使用的默认 URL。</p>
<h4 id="next-js-参考实现" tabindex="-1"><a class="header-anchor" href="#next-js-参考实现"><span>Next.js 参考实现</span></a></h4>
<p>最后，你可以将此后端与你选择的前端配对。Breeze 前端的 Next 参考实现在 <a href="https://github.com/laravel/breeze-next" target="_blank" rel="noopener noreferrer">在GitHub上提供</a>。此前端由 Laravel 维护，并包含与 Breeze 提供的传统 Blade 和 Inertia 堆栈相同的用户界面。</p>
<h2 id="laravel-jetstream" tabindex="-1"><a class="header-anchor" href="#laravel-jetstream"><span>Laravel Jetstream</span></a></h2>
<p>虽然 Laravel Breeze 为构建 Laravel 应用程序提供了简单和最小的起点，但 Jetstream 通过更强大的功能和附加的前端技术栈增强了该功能。<strong>对于全新接触 Laravel 的用户，我们建议使用 Laravel Breeze 学习一段时间后再尝试 Laravel Jetstream。</strong></p>
<p>Jetstream 为 Laravel 提供了美观的应用程序脚手架，并包括登录、注册、电子邮件验证、双因素身份验证、会话管理、通过 Laravel Sanctum 支持的 API 以及可选的团队管理。Jetstream 使用 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> 设计，并提供你选择使用 <a href="https://laravel-livewire.com/" target="_blank" rel="noopener noreferrer">Livewire</a> 或 <a href="https://inertiajs.com/" target="_blank" rel="noopener noreferrer">Inertia</a> 驱动的前端脚手架。</p>
<p>有关安装 Laravel Jetstream 的完整文档，请参阅 <a href="https://jetstream.laravel.com/3.x/introduction.html" target="_blank" rel="noopener noreferrer">Jetstream 官方文档</a>。</p>
<blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/10.x/starter-kits/14839" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/10.x/st...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/10.x/starter-kits/14839" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/10.x/st...</a></p>
</blockquote>
</div></template>


